<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src='lib/babel.min.js'></script>
</head>
<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.querySelector('#root'));
    const book = [
        {
            type:"面试题",
            color:"green",
            bookList:[
                {
                    id:1,
                    bookName:"Vue"
                },{
                    id:2,
                    bookName:"react"
                },{
                    id:3,
                    bookName:"小程序"
                }
            ]
        },
        {
            type:"小说",
            color:"red",
            bookList:[
                {
                    id:1,
                    bookName:"吞噬星空"
                },{
                    id:2,
                    bookName:"鬼灭之刃"
                },{
                    id:3,
                    bookName:"哪吒闹海"
                }
            ]
        }
    ];
    root.render((
        <div>
            {
                book.map((item,index)=>(
                    <div key={index}>
                        <h3 style={{color:item.color}}>{item.type}</h3>
                        {
                            item.bookList.map(item=>(
                                <p key={item.id}>《{item.bookName}》</p>
                            ))
                        }
                        <hr/>
                    </div>
                ))
            }
        </div>
    ))
</script>
</html>